<template>
  <div>
    <a-row :gutter="16" type="flex">
      <a-col :span="15" style="height: auto">
        <u-card title="代办事项" icon="file" iconColor="#fdd9a2">
          <template #right>
            <a-radio-group v-model="type">
              <a-radio-button value="a"> 今日 </a-radio-button>
              <a-radio-button value="b"> 过去7天 </a-radio-button>
            </a-radio-group>
          </template>
          <a-list
            class="demo-loadmore-list"
            item-layout="horizontal"
            :data-source="todoListData"
          >
            <a-list-item slot="renderItem" slot-scope="item, index">
              <span slot="actions" class="button-text"> 标记为已处置 </span>
              <a-list-item-meta :title="item.title">
                <template #description>
                  <span v-html="item.desc"></span>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </u-card>
      </a-col>
      <a-col :span="9" style="height: auto">
        <u-card title="风险主机 Top 10" icon="laptop" iconColor="#f97f69">
          <a-table
            :columns="riskHostColumns"
            :data-source="riskHostData"
            :pagination="false"
            :loading="loading"
          >
            <template slot="count" slot-scope="row">
              <span class="button-text">{{ row.event_count }}</span>
            </template>
            <template slot="host" slot-scope="row">
              <span class="button-text">{{ row.host_name }}</span>
            </template>
          </a-table>
        </u-card>
      </a-col>
    </a-row>
    <a-row :gutter="16" type="flex">
      <a-col :span="15" style="height: auto">
        <u-card title="可疑事件" icon="bug" iconColor="#bd9ae2">
          <a-table
            :columns="suspiciousColumns"
            :data-source="suspiciousData"
            :pagination="false"
            :loading="loading"
          >
            <template slot="count" slot-scope="row">
              <span class="button-text">{{ row.event_occurrence_count }}</span>
            </template>
            <template slot="host" slot-scope="row">
              <span class="button-text">{{ row.host_count }}</span>
            </template>
          </a-table>
        </u-card>
      </a-col>
      <a-col :span="9">
        <u-card
          title="安全事件"
          style="height: auto"
          icon="alert"
          iconColor="#35cdcc"
        >
          <a-table
            :columns="securityEventColumns"
            :data-source="securityEventData"
            :pagination="false"
            :loading="loading"
          >
            <template slot="count" slot-scope="row">
              <span class="button-text">{{ row.event_count }}</span>
            </template>
          </a-table>
        </u-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  todoListData,
  riskHostData,
  suspiciousData,
  securityEventData,
} from "@/config/main/data/app";

export default {
  data() {
    return {
      type: "a",
      todoListData,
      riskHostData,
      riskHostColumns: [
        {
          title: "主机名称",
          key: "host_name",
          scopedSlots: { customRender: "host" },
        },
        {
          title: "最新发现时间",
          dataIndex: "latest_discovery_time",
          key: "latest_discovery_time",
        },
        {
          title: "事件数量",
          key: "event_count",
          scopedSlots: { customRender: "count" },
        },
      ],
      suspiciousData,
      suspiciousColumns: [
        {
          title: "事件类型",
          dataIndex: "event_type",
          key: "event_type",
        },
        {
          title: "首次发现时间",
          dataIndex: "first_discovery_time",
          key: "first_discovery_time",
        },
        {
          title: "最新发现时间",
          dataIndex: "latest_discovery_time",
          key: "latest_discovery_time",
        },
        {
          title: "事件发生次数",
          key: "event_occurrence_count",
          scopedSlots: { customRender: "count" },
        },
        {
          title: "发生事件主机数",
          key: "host_count",
          scopedSlots: { customRender: "host" },
        },
      ],
      securityEventData,
      securityEventColumns: [
        {
          title: "事件类型",
          dataIndex: "event_type",
          key: "event_type",
        },
        {
          title: "最新发现时间",
          dataIndex: "latest_discovery_time",
          key: "latest_discovery_time",
        },
        {
          title: "发生次数",
          key: "event_count",
          scopedSlots: { customRender: "count" },
        },
      ],
      loading: false,
    };
  },
};
</script>

<style lang="scss">
.main-home .app-main {
  background: none;
  padding: 0;

  .u-card {
    margin-bottom: 20px;
    height: calc(100% - 20px);
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 16px;
  }
}
</style>
